<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="item in n">
            {{message}}
        </div>
        <button @click="hClick">把n改成10</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'vue生命周期',
                n: 3
            },
            methods: {
                hClick () {
                    
                    console.log(document.getElementById("app").innerHTML) // 3  vue生命周期
                    this.n = 10
                    // 如果是立即渲染，则下面的输出中会有10个 vue生命周期
                    // console.log(document.getElementById("app").innerHTML) // 3  vue生命周期
                    // 如果改新的数据，则视图会在 “下一次更新周期” 时去变化

                    this.$nextTick(()=>{
                        // 函数中的代码不是立即执行的，
                        // 而是当vue对视图的更新完成之后再做
                        // 就是在 updated 之后执行
                        console.log(document.getElementById("app").innerHTML) // 3  vue生命周期
                    })
                }
            },
            updated: function () {
                console.group('------更新完成状态------');
                console.dir(document.getElementById('app').innerHTML); //
                console.log('数据项：', this.message); //  
                console.groupEnd('------更新完成状态------');
            }
        })
    </script>
</body>
</html>